<template>
  <div>
    <br/>
    <el-row>
        <!-- 设置一个布局，前3列为空，这里不用offset偏移的原因时因为offset在浏览器的console中会报错 -->
      <el-col :span="3">&nbsp;</el-col>
      <!-- 文字占列宽18 -->
      <el-col :span="18">
        <div class="banner-content">
          <h1>民航业信息管理,就要CAIS</h1>
          <h2>民航业可视化信息管理系统</h2>
          <p>
            深圳信息职业技术学院“我写的Bug不可能有代码”团队研发的<br />
            CAIS-[Civil aviation industry system]
            是一款可视化查看民航业数据的后台系统<br />
            基于PostgreSQL以及Django后台管理为基础框架，为用户提供自由且美观的查看数据方式<br />
            一站式解决民航业数据冗杂难以整理的问题。
          </p>
          <el-button type="warning" round @click="centerDialogVisible = true">
            <b>开始使用</b>
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 对话框组件，当centerDialogVisible参数为flase时不显示，点击上面的那个开始使用就会把它变成true，走完流程后
    会在下面的一个方法中把它在改为false
    组件在挂载完毕后，默认centerDialogVisible为false -->
    <el-dialog
      title="使用教程"
      v-model="centerDialogVisible"
      width="45%"
      center
    >
    <!-- 每一步的内容自定义，可以自定义成你喜欢的内容 -->
      <el-steps :active="active" finish-status="success" align-center>
        <el-step
          title="设置数据日期"
          description="在下面的'参数调节中'设置航班的日期"
        ></el-step>
        <el-step
          title="设置起飞机场"
          description="在下面的'参数调节中'设置起飞机场"
        ></el-step>
        <el-step
          title="选择显示图表(可选)"
          description="在仪表板右侧的小齿轮按钮中,选择需要展示的图表"
        ></el-step>
        <el-step
          title="下载图表(可选)"
          description="在每一张图表的右上角可以点击下载按钮将图表保存至本地"
        ></el-step>
        <el-step
          title="上传数据(可选)"
          description="在底部上传部分,可以上传csv文件将数据导入至后台数据库中(提供模板)"
        ></el-step>
      </el-steps>
      <el-button style="margin-top: 12px" @click="next" id="next">下一步</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "introduce",
  data() {
    return {
      active: 0,
      centerDialogVisible: false,
    };
  },

  methods: {
    //   next方法，用来自增active，保证点击下一步时有高亮，到走到最后一步时把centerDialogVisible参数变为false，不显示
    next() {
      if (this.active++ > 4) {
        this.active = 0;
        this.centerDialogVisible= false
        }
    },
  },
};
</script>

<style scoped>
h1 {
  color: whitesmoke;
  margin-bottom: 5px;
}

h2 {
  color: whitesmoke;
  margin-bottom: 12px;
}

p {
  color: whitesmoke;
  margin-bottom: 14px;
  font-size: 18px;
}
</style>